<template>
  <div class="no-shop-container-fixed flex-center" v-if="bulletBox">
    <div class="no-shop-container">
      <i class="el-icon-close" @click="close"></i>
      <div class="no-shop-container-header flex-center-wrap">
        <img
          class="d-tip-img"
          src="//image.zlketang.com/public/news/others/imgs/web_pc/2cb4fe360ab7a0fe4072eb2509badc44.png"
          alt=""
        />
        <div class="m-l-10 f-550">温馨提示</div>
      </div>

      <div class="tip m-t-20">
        亲，由于{{ isLive ? '课程' : '商品' }}安排调整，该{{
          isLive ? '课程' : '商品'
        }}已下线，给您带来不便表示歉意!
      </div>
      <div class="tip1">
        <span class="c-primary">
          如果您有疑问?
        </span>
        请联系客服。
      </div>

      <div class="no-shop-container-footer flex-center flex-justify-end">
        <div
          class="fhxk flex-center"
          @click="goBack"
          v-if="!isLive && !query.from_type"
        >
          返回选课
        </div>
        <div class="lxkf flex-center" @click="show53Kefu">
          联系客服
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    bulletBox: {
      type: Boolean,
      default: false
    },
    isLive: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {}
  },
  computed: {
    query() {
      return this.getQuery(location.href)
    }
  },
  methods: {
    goBack: function() {
      this.goTo('/courses/4.html')
    },
    close: function() {
      this.$emit('update:bulletBox', false)
    }
  }
}
</script>
<style scoped>
.no-shop-container-fixed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 2100;
}
.no-shop-container {
  position: relative;
  padding: 20px 20px 15px;
  width: 465px;
  background: #ffffff;
  border-radius: 12px;
}
.no-shop-container-header {
  height: 22px;
  font-size: 16px;
  font-weight: 500;
  color: #383838;
  line-height: 22px;
}
.d-tip-img {
  width: 18px;
  height: 18px;
}
.m-l-10 {
  margin-left: 10px;
}
.el-icon-close {
  color: #d9d9d9;
  position: absolute;
  font-size: 20px;
  top: 15px;
  right: 15px;
  font-weight: blod;
}
.tip {
  margin-top: 20px;
  padding-left: 28px;
  height: 20px;
  font-size: 14px;
  font-weight: 400;
  color: #666666;
  line-height: 20px;
}
.tip1 {
  padding-left: 28px;
  margin-top: 9px;
  height: 20px;
  font-size: 14px;
  font-weight: 600;
  color: #666666;
  line-height: 20px;
}
.c-primary {
  color: #3480ff;
}
.no-shop-container-footer {
  margin-top: 24px;
}
.lxkf {
  margin-left: 10px;
  cursor: pointer;
  width: 86px;
  height: 32px;
  background: #3480ff;
  border-radius: 16px;
  border: 1px solid #3480ff;
  font-size: 14px;
  font-weight: 400;
  color: #ffffff;
}
.fhxk {
  cursor: pointer;
  width: 86px;
  height: 32px;
  border-radius: 16px;
  border: 1px solid #d9d9d9;

  font-size: 14px;
  font-weight: 400;
  color: #666666;
}
.f-550 {
  font-weight: 550;
}
</style>
